<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="/jquery-3.3.1.js"></script>
    <title>登陆</title>
</head>
<body>
    <div style="width: 249px ;height: 100px;margin: 0 auto" align="center">
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="text" class="form-control" id="username">
        </div>
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
            <input type="password" class="form-control" id="password">
        </div>
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-bookmark"></span></span>
            <input type="text" class="form-control" id="code" placeholder="请输入下方验证码">
        </div>
            <img src="/vCode" style="width: 248.8px;height: 34px" id="img">
        <button class="btn btn-primary" id="loginbtn">登陆</button>
    </div>
<script>
    $(document).ready(function () {
        $("#img").click(function () {
            this.src="/vCode?x="+Math.random();
        });
        $("#loginbtn").click(function () {
            var  username=$("#username").val();
            var  password=$("#password").val();
            var code=$("#code").val();

            $.ajax({
                url:"/loginValidation",
                type:"post",
                async:true,
                data:{
                    "username":username,
                    "password":password,
                    "code":code
                },
                dataType:"json",
                success:function (data) {
                    console.info(data);
                    if(data.state =="fail"){
                        alert(data.message);
                        document.getElementById("img").src="/vCode?x="+Math.random();
                    }else{
                        location.href = "/home";
                    }
                }
            })
        })
    })
</script>
</body>
</html>